<template>
  <view class="forget">
    <view class="content">
      <!-- 主体 -->
      <view class="main">
        <view class="tips">若你忘记了密码，可在此重置新密码。</view>
        <wInput v-model="phoneData" type="text" maxlength="11" placeholder="请输入手机号码"></wInput>
        <wInput v-model="passData" type="password" maxlength="11" placeholder="请输入新密码" isShowPass></wInput>

        <wInput
          v-model="verCode"
          type="number"
          maxlength="4"
          placeholder="验证码"
          isShowCode
          codeText="获取重置码"
          setTime="30"
          ref="runCode"
          @setCode="getVerCode()"
        ></wInput>
      </view>

      <wButton class="wbutton" text="重置密码" :rotate="isRotate" @click.native="startRePass()"></wButton>
    </view>
  </view>
</template>

<script>
let _this
import wInput from './components/watch-login/watch-input.vue' //input
import wButton from './components/watch-login/watch-button.vue' //button
export default {
  data() {
    return {
      phoneData: '', //电话
      passData: '', //密码
      verCode: '', //验证码
      isRotate: false, //是否加载旋转
    }
  },
  components: {
    wInput,
    wButton,
  },
  mounted() {
    _this = this
  },
  methods: {
    getVerCode() {
      //获取验证码
      if (_this.phoneData.length != 11) {
        uni.showToast({
          icon: 'none',
          position: 'bottom',
          title: '手机号不正确',
        })
        return false
      }
      console.log('获取验证码')
      this.$refs.runCode.$emit('runCode') //触发倒计时（一般用于请求成功验证码后调用）
      uni.showToast({
        icon: 'none',
        position: 'bottom',
        title: '模拟倒计时触发',
      })

      setTimeout(function () {
        _this.$refs.runCode.$emit('runCode', 0) //假装模拟下需要 终止倒计时
        uni.showToast({
          icon: 'none',
          position: 'bottom',
          title: '模拟倒计时终止',
        })
      }, 3000)
    },
    startRePass() {
      //重置密码
      if (this.isRotate) {
        //判断是否加载中，避免重复点击请求
        return false
      }
      if (this.phoneData.length != 11) {
        uni.showToast({
          icon: 'none',
          position: 'bottom',
          title: '手机号不正确',
        })
        return false
      }
      if (this.passData.length < 6) {
        uni.showToast({
          icon: 'none',
          position: 'bottom',
          title: '密码不正确',
        })
        return false
      }
      if (this.verCode.length != 4) {
        uni.showToast({
          icon: 'none',
          position: 'bottom',
          title: '验证码不正确',
        })
        return false
      }
      console.log('重置密码成功')
      _this.isRotate = true
      setTimeout(function () {
        _this.isRotate = false
      }, 3000)
    },
  },
}
</script>

<style>
@import url('./components/watch-login/css/icon.css');
@import url('./css/main.css');
</style>
